<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/2/18
  Time: 16:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
    if (path.equals("/")) {
        path = "";
    }
%>
<html>
<head>
    <title>编辑${servletAction}-stub测试</title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/global.css?v=2">
    <script type="text/javascript" src="http://blog.yhskyc.com/convention2/static/js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="http://blog.yhskyc.com/convention2/static/js/common_util.js"></script>
    <script type="text/javascript" src="http://blog.yhskyc.com/convention2/static/js/jquery.form.js"></script>
    <script type="text/javascript" src="<%=path%>/static/js/stub.js"></script>
    <script type="text/javascript">
        $(function () {
            $('input[name=servletAction]').focus();
        })
    </script>
</head>
<style>
    .success{
        color: green;
        font-weight: bolder;
    }
    .error{
        color:red;
        font-weight: bolder;
    }
</style>
<script type="text/javascript">
    var selectedIndex= <c:choose><c:when test="${stubs.selectedIndex==null}">0</c:when><c:otherwise>${stubs.selectedIndex}</c:otherwise></c:choose>;
    var server_url = "<%=path %>"//+"/convention";
    var hideMessage= function () {
        $('div.error').hide();
        $('div.success').hide();
    };
   /* $(function () {
        setTimeout(hideMessage,5000);
    });*/
    var addAction= function () {
        var servletActionPath=$('#servletAction1').val();
        if(!servletActionPath){
            showError("请输入接口路径");
            return false;
        }
        $('#servletAction2').val(servletActionPath);
        var action=$('#formSave').attr('action');
        console.log(action);
        //var a="a/b/c/d";console.log(a);var index=a.lastIndexOf('/');console.log(a.substring(0,index+1))  output:a/b/c/
        var index=action.lastIndexOf('/')
        $('#formSave').attr('action',action.substring(0,index+1)+"save");
        return true;
    };
    var showError=function (message) {
        var $error=$('div.error');
        $error.show();
        $error.html(message);
        setTimeout(hideMessage,5000);
    };
    var timer2016;
    var showSuccess=function (message) {
        if(timer2016){
            clearTimeout(timer2016);
            timer2016=undefined;
        }
        var $success=$('div.success');
        $success.show();
        $success.html(message);
        timer2016=setTimeout(hideMessage,5000);
    };
    var saveAction=function(){
        var servletActionPath=$('#servletAction1').val();
        if(!servletActionPath){
            showError("请输入接口路径");
            return;
        }
    	$('#servletAction2').val(servletActionPath);
        var options = {
            type: "POST",
            dataType: 'json',
            success: function (json2) {
                if (json2.result) {
                    showSuccess("更新成功");
                } else {
                    console.log(json2);
//                    hideLoadPanel();
                    showError(json2.errorMessage);
                }
            }
            ,
            error: function (er) {
                modifyServerUrl(er);
                console.log(er);
                alert(er.responseText);
            }
        };
        //采用Ajax 提交表单,页面不会跳转

        $('#formSave').ajaxSubmit(options);
    };
    var modifyServerUrl = function (er) {
        if(!er.status||(er.statusText && er.statusText == 'error')){// {readyState: 0, responseText: "", status: 0, statusText: "error"}
            alert('请确认服务是否启动')
        }else if ((er.status && er.status == '404') || (er.statusText && er.statusText == 'Not Found')) {
            server_url += "/stub_test";
        }
    };
    var updateIndex=function (selectedIndex2) {
        if(selectedIndex2==window.selectedIndex){
            console.log('selectedIndex:'+window.selectedIndex);
            return;
        }
        var options = {
            url: server_url + "/stubEdit/updateIndex",
            type: "POST",
            dataType: 'json',
            data:{"index":selectedIndex2,"servletAction":$('#servletAction1').val()},
            success: function (json2) {
                if (json2.result) {
                    showSuccess("已更新当前项");
                    var self=$('textarea').removeClass('selected')[selectedIndex2];
                    var $self = $(self);
                    $self.addClass('selected');
                    window.selectedIndex=selectedIndex2;
//                            alert(json2.tips);
                } else  {
                    alert(json2.errorMessage)
                }
            },
            error: function (er) {
                modifyServerUrl(er);
                console.log(er)
            }
        };
        $.ajax(options);
    };
    var testCrossDomain=function () {
        var options = {
            url:   "http://blog.yhskyc.com/convention2/test/324/json",
            type: "get",
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            dataType: 'json',
            success: function (json2) {
                console.log(json2)
            },
            error: function (er) {
                modifyServerUrl(er);
                console.log(er)
            }
        };
        $.ajax(options);
    }

    var updateIndexThrottle=throttle3(updateIndex,200);
//    var updateIndexThrottle=updateIndex;
    var updateOneOption = function (self) {
        $('textarea').removeClass('selected');
        var $self = $(self);
        $self.addClass('selected');
        var data = {
            "servletAction": $('#servletAction1').val(),
            "content": $self.val(),
            "attributeVal": $self.parent().find('input[name=attributeVal]').val(),
            "index": $self.data('index')
        };
        var options = {
            url: server_url + "/stubEdit/updateJsonOne",
            type: "POST",
            dataType: 'json',
            data: data,
            success: function (json2) {
                if (json2.result) {
                    showSuccess("更新成功");
//                            alert(json2.tips);
                } else {
                    alert(json2.errorMessage)
                }
            },
            error: function (er) {
                modifyServerUrl(er);
                console.log(er)
            }
        };
        $.ajax(options);
    };
    var bindEvent=function ($textarea) {
        $textarea.keydown(function (event) {
//            console.log(event.keyCode)
            if ((event.keyCode == 83/*S*/||event.keyCode == 88/*X*/ )&& event.ctrlKey) {
                console.log('save');
                updateOneOption(this);
            }
        }).click(function (event) {
            var $self=$(this);
            var selectedIndex=$self.data('index');
            updateIndexThrottle(selectedIndex);
        }).focus(function (event) {
            var $self=$(this);
            var selectedIndex=$self.data('index');
            updateIndexThrottle(selectedIndex);
        });

    };
    $(function (event) {
        bindEvent($('textarea'));
        adapterDivWidth($('textarea'),$('div.stubRange'));
    });
    //使div (class 为"stubRange")的宽度能够容得下所有的文本域
    var adapterDivWidth=function ($textareas,$div) {
        var stubRangeDivWidth=0;
        $textareas.each(function () {
            stubRangeDivWidth+=($(this).width()+20);
        });
        console.log("stubRangeDivWidth:"+stubRangeDivWidth);
        $div.css('width',(stubRangeDivWidth+126));
    };
    var addOptionTextarea=function (self) {
        var $stubRangeDiv=$('div.stubRange');
        var $textareas=$stubRangeDiv.find('textarea');
        var textareaLength=$textareas.length;
        var $textareasHTML='<textarea data-index="'+textareaLength+'" style="float: left;" name="content" cols="85" rows="28"></textarea>';
        $(self).before($textareasHTML);
        $textareas=$stubRangeDiv.find('textarea');//因为新增了一个textarea,所以需要重新获取一遍,否则$textareas不包括新增的那个
        var newTextarea=$textareas.get(textareaLength);
        bindEvent($(newTextarea));//新增的那个textarea也得重新绑定事件
        adapterDivWidth($textareas,$stubRangeDiv);
        //清空错误信息:"内容为空 (请点击 [添加option])"
        var $errorDiv=$('div.error');
        if($errorDiv.text()){
            newTextarea.focus();
        }
        $errorDiv.empty();

    };
    $(function () {
        $('#updateAttributeNameBtn').click(function () {
            var data = {
                "servletAction": $('#servletAction1').val(),
                "attributeName": $('input[name=attributeName]').val()
            };
            var options = {
                url: server_url + "/stubEdit/updateAttributeName",
                type: "POST",
                dataType: 'json',
                data: data,
                success: function (json2) {
                    if (json2.result) {
                        showSuccess("更新请求参数名称成功");
//                            alert(json2.tips);
                    } else {
                        alert(json2.errorMessage)
                    }
                },
                error: function (er) {
                    modifyServerUrl(er);
                    console.log(er)
                }
            };
            $.ajax(options);
        })
    })
</script>
<body>
<div>
    <form action="<%=path%>/stubEdit/search">
    ${action}的接口: <input type="text" id="servletAction1" name="servletAction" VALUE="${servletAction}" style="width: 400px;" placeholder="/api/v1/appstore/queryOrgBuyProductInfo" > <input type="submit" value="搜索" >
    
    </form>
    
</div>
<a target="_blank" href="<%=path%>/">stub接口列表</a>&nbsp;&nbsp;<a target="_blank" href="<%=path%>/old_content">stub历史记录</a>
<br>
访问地址: <a target="_blank" href="${url}">${url}</a>
<div style="height: 22px;" >
    <div class="error" >${errorMessage}</div>
    <div class="success" >${tips}</div>
</div>
<div>
    <form action="<%=path%>/stubEdit/updateJson" method="post" id="formSave" >
        <input type="hidden" id="servletAction2" name="servletAction" VALUE="${servletAction}" >
        <label > 请求参数名称: <input style="width: 300px;" type="text" name="attributeName" placeholder="可以为空" value="${stubs.attributeName}" ></label>
        <input type="button" value="更新请求参数名称" id="updateAttributeNameBtn" >
        <div style="width: 100%;overflow-y: hidden;overflow-x: auto;">

            <div class="stubRange">
                <c:forEach items="${stubs.stubs }" var="stub" varStatus="status">
                    <div class="stub-unit" style="float: left;">
                        <textarea data-index="${status.index}"
                                  <c:if test="${stubs.selectedIndex==status.index}">class="selected"</c:if> name="content" placeholder="Ctrl+X 或者Ctrl+S 保存"
                                  cols="85" rows="28">${stub.stub }</textarea>
                        <br>
                        <label > 请求参数值: <input style="width: 80%;" name="attributeVal" type="text" placeholder="&quot;请求参数名称&quot;不为空时,才有必要填写" value="${stub.attributeVal}" ></label>
                    </div>

                </c:forEach>
                <a style="float: left" onclick="addOptionTextarea(this)" href="javascript:void(0)">添加option</a>
            </div>
        </div>
        <br>
        <%--<input type="button" class="submit" onclick="saveAction();" value="确认更新" > &nbsp;--%><input type="submit" onclick="return addAction();" value="新增" >
    </form>

</div>
</body>
</html>
